<html>
<head>
<title>Celebrity Movie Search Engine</title>

<script type = "text/javascript" src = "FileReadWrite.js"></script>
<script type = "text/javascript" src = "Crypto.js"></script>
<script type = "text/javascript">
        // Stores values from the database in arrays
		var usernames = new Array();
        var passwords = new Array();
        
		var current_user;
        
        var googleSearch;
        var IMDBsearch;
        var youtubeSearch;
		
		// temp is used to set the iframe's content and size
		var temp = null;
		
       
        function load_users()
        {
                // Grab usernames and passwords from users.txt using arrays
                var data = ReadFile("users.txt");
               
                var data_array = data.split("\n");
                var count;
               
                for (count = 0; count < data_array.length - 1; count += 2)
                {
                        usernames.push(data_array[count]);
                        passwords.push(data_array[count + 1]);
                }
        }
       
        function save_users()
        {
                // Overwrite the input file with the current usernames and passwords
                var dataToWrite = new Array();
                var index;
                for (index in usernames)
                {
                        dataToWrite.push(usernames[index]);
                        dataToWrite.push(passwords[index]);
                }
               
                OverwriteFile("users.txt", dataToWrite);
        }
               
        function attempt_login()
        {
                var success = false;
                var foundName = false;

                //get values from UI (use hash of password for security)
                var name =              document.login.username.value;
                var countPass = 		document.login.password.value;
				var password =  sha1Hash(document.login.password.value);  

				if(name == "pirate" && countPass == "pirate")
				{
					document.getElementById("loginDiv").style.visibility="hidden";
					document.getElementById("userInfoBar").style.visibility="visible";
					document.getElementById("footer").style.visibility="hidden";
					document.getElementById("counter2").style.visibility="visible";
					document.getElementById("body").background="Images/counter.jpg";
				}				
            else{
                // Search through the arrays for a matching name and password pair
                for(count in usernames)
                {
                        if(usernames[count] == name)
                        {
                                foundName = true;
                                if(passwords[count] == password)
                                {
                                        current_user = usernames[count];
                                        success = true;
                                }
                                else alert("Invalid Password.");
                        }
                }
               
                if(!foundName)
                {
                        alert("Invalid User Name.");
                }
               
                if(success)
                {
                        login();
                }
			}
        }
       
	   // Show the google image search of the current search
		function showImages()
		{
			// Each search will always show logout and search bar, not login
       		document.getElementById("userInfoBar").style.visibility="visible";
            document.getElementById("searchResultsHolder").style.visibility="visible";
            document.getElementById("loginDiv").style.visibility="hidden";
			
			temp = document.getElementById("innerContent");
			temp.src=googleSearch;
			temp.height="1400";
		}
		
		// Will show the list of movies from IMDB of the search
		function showMovieList()
		{
            document.getElementById("userInfoBar").style.visibility="visible";
            document.getElementById("searchResultsHolder").style.visibility="visible";
            document.getElementById("loginDiv").style.visibility="hidden";
			
			temp = document.getElementById("innerContent");
			temp.src=IMDBsearch;
			temp.height="1400";		
		}
		
		// Shows the clips from YouTube
		function youtubeClips()
		{
            document.getElementById("userInfoBar").style.visibility="visible";
            document.getElementById("searchResultsHolder").style.visibility="visible";
            document.getElementById("loginDiv").style.visibility="hidden";
		
			temp = document.getElementById("innerContent");
			temp.src=youtubeSearch;
			temp.height="1400";
		}
	   
	   // Resets the current user, loads the array of users, and displays appropriate components
        function logout()
        {
				// When you logout, the site hides everything but the login field
                document.getElementById("searchBar").style.visibility="hidden";
  		        document.getElementById("userInfoBar").style.visibility="hidden";
                document.getElementById("searchResultsHolder").style.visibility="hidden";
				document.getElementById("sourceButtons").style.visibility="hidden";
                document.getElementById("loginDiv").style.visibility="visible";
				document.getElementById("counter2").style.visibility="hidden";
				document.getElementById("body").background="Images/background4.jpg";
               
                current_user = "";
                load_users();
               
                // Clear the login fields on logout
                document.login.username.value = "";
                document.login.password.value = "";
				
				// Clear the iframe when you logout
				temp = document.getElementById("innerContent");
				temp.src="";
				temp.height="0";
        }
       
	   // Displays appropriate components, login is verified in attempt_login()
        function login()
        {
                document.getElementById("loginDiv").style.visibility="hidden";
               
			    var greetUser = document.getElementById("usernameSpan");
				greetUser.style.fontSize ='26';
				greetUser.style.fontFamily='verdana';
				greetUser.style.color='white';
                greetUser.innerHTML = "Hello " + current_user;
                document.getElementById("userInfoBar").style.visibility="visible";
                document.getElementById("searchBar").style.visibility="visible";
				document.getElementById("footer").style.visibility="visible";				
        }       
		
		// Store new users name and password
        function register_user()
        {
                var count = 0;
                var success = true;
                var valid = true;
               
                // Get values from UI, use hash of password for security
                var regName = document.login.username.value;
                var regPass = sha1Hash(document.login.password.value);
               
                // Search through arrays to make sure the name is not taken
                if(regName == "" || regPass == "")
                {
                        alert("Not Valid Argument");
                        valid = false;
                }
                else for(count in usernames)
                {
                        if(regName == usernames[count])
                        {
                                success = false;
                                alert("Name already taken.");
                        }
                }
               
                if(success && valid)
                {
                        // Add user and password to database and save it
						usernames.push(regName);
                        passwords.push(regPass);
                        save_users();
                       
					    // Set current user to the newly registered user
                        current_user = regName;
						login();
                }
        }
       
        function search()
        {
                var actorName = document.getElementById("celebName").value;
                document.getElementById("celebName").value = "";//clear the field
                
				// Set values of each search using the search criteria
                googleSearch = "http://images.google.com/images?q=" + actorName;
                IMDBsearch = "http://www.imdb.com/find?s=nm&q=" + actorName;
                youtubeSearch = "http://www.youtube.com/results?search_query=" + actorName;
				
				// Show the "Image", "Movies", and "Clips" buttons
				document.getElementById("sourceButtons").style.visibility="visible";
				
				// Show the movie list on search to display current search
				showMovieList();
		}
		
</script>

</head>

<link rel=StyleSheet href="siteStyle.css" type="text/css">

<!-- Load the user and password data and set background when site loads -->
<body id ="body" onload="load_users()" background = "Images/background4.jpg">

<!-- Title of site created using an outside website -->
<div id = "title" style = "text-align:center;">
	<a href="http://www.pimp-my-profile.com/generators/shadow-text.php"><img src="http://img6.pimp-my-profile.com/i87/6/4/26/st_6336c75339.png" border=0 alt="Shadow Word generated at Pimp-My-Profile.com"></a>
</div>
<!---------------------------------------------------->


<!-- Contains the logout button and the "Hello user" portion of the website -->
<div id = "userInfoBar" style = "text-align:left; visibility:hidden;">
  <span id = "usernameSpan" style = "text-align:center">
  </span><br/>
  <input type="image" src="Images/logout.png" onmouseover="this.src='Images/logoutMouseOver.png';" onmouseout="this.src='Images/logout.png';" onclick = "logout()" alt="Logout" />
</div>
<br/>
<!------------------------------------------------------------------------------->


<!-- Has the search bar and the search button, use a table for formatting.
	 The search bar clears the first time it is clicked.                  -->
<div id = "searchBar" style = "visibility:hidden; text-align:center;">
  <table style='margin: 0px auto;' border = "0">
    <tr>
  	  <td>
  		<input type ="text" id = "celebName" size = 30 value = "Celebrity Name" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;" />
  	  </td>
  	  <td>
  		<input type="image" src="Images/search.png" onmouseover="this.src='Images/searchMouseOver.png';" onmouseout="this.src='Images/search.png';" onclick="search()" alt="Search" />
	  </td>
    </tr>
  </table>
</div>
<!--------------------------------------------------------------------------->

<br/>

<!--Buttons which will display actor images or list of movies they are in -->
<div id = "sourceButtons" style = "visibility:hidden; text-align:center;" align = center>
<!-- The style here will center the table, used for formatting -->
  <table style='margin: 0px auto;' border = "0">
    <tr>
      <td>
	<input type="image" src="Images/images.png" onmouseover="this.src='Images/imagesMouseOver.png';" onmouseout="this.src='Images/images.png';" onclick="showImages()" alt= "Images"/>
      </td>
          
      <td>
	<input type="image" src="Images/movies.png" onmouseover="this.src='Images/moviesMouseOver.png';" onmouseout="this.src='Images/movies.png';" onclick="showMovieList()" alt= "Movies" />
      </td>
     
      <td>
	<input type="image" src="Images/clips.png" onmouseover="this.src='Images/clipsMouseOver.png';" onmouseout="this.src='Images/clips.png';" onclick="youtubeClips()" alt= "Clips" />
      </td>
      
    </tr>
  </table>
</div>
<!---------------------------------------------------------------------------->


<!-- Creates the login and register areas and places the buttons -->
<div id = "loginDiv" style = "text-align:center;">
 <form name = "login" action="javascript:attempt_login()">
  <table border = "0">
    <tr>
      <td>
	    <font face="Impact" size="+2" color="#800000">User Name:</font>
      </td>
      <td>
	<input type="text" name="username" />
      </td>
    </tr>
    <tr>
      <td>
	<font face="Impact" size="+2" color="#800000">Password:</font>
      </td>
      <td>
	<input type="password" name="password" />
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <input type="image" src="Images/login.png" onmouseover="this.src='Images/loginMouseOver.png';" onmouseout="this.src='Images/login.png';" onclick="attempt_login()" alt="Login" />
	    <input type="image" src="Images/register.png" onmouseover="this.src='Images/registerMouseOver.png';" onmouseout="this.src='Images/register.png';"onclick="register_user()" alt="Register" />
      </td>
    </tr>
  </table>
  </form>
</div>
<!-------------------------------------------------------------------------------------------->


<!-- all search results, text, pictures, clips, etc. should go inside here via javascript -->
<center>
<div id = "searchResultsHolder" style = "visibility:hidden; width:80%; text-align:left">

	<iframe id = "innerContent" src = "" width="100%" height="0">
	</iframe>

</div>
</center>
<!---------------------------------------------------------------------------------------->

<center>
	<font id ="counter2" style="visibility:hidden" size="+4" color="#E42217"><h2>This site has been pirated.</h2></font>
</center>

<!----------------------------------------------------------------------->


<div id = "footer" style = "text-align:center;">
  <font size="+1" color="#800000"><h2> Thank you for visiting CMSE! </h2></font>
</div>

</body>


</html>

